<template>
  <!-- 市场价格 -->
  <div>
    <div class="app-page">
      <goods-tree
        title="商品分类"
        :tree-data="treeData"
        :loading="$loadingPlugin.getTreeData"
        :mouse-button="false"
        @currentChange="currentChange"
      />

      <!-- 列表 -->
      <!-- 表单 -->
      <lb-table
        ref="lbTable"
        v-loading="$loadingPlugin.fetchData"
        v-el-height-adaptive-table="{bottomOffset:10}"
        class="table"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :immediate-fetch="false"
        @fetch="fetchData"
        @expand-change="clickExpand"
      />
    </div>
    <set-price ref="setPrice" />
    <historicalPrice ref="historicalPrice" />
  </div>
</template>

<script>
  import { goodsTypeQueryAllList, queryGoodsListAll, marketPriceDelete, queryMarketPriceDetail } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import GoodsTree from '@/views/components/GoodsTypeTree'
  import SetPrice from './components/SetPrice'
  import HistoricalPrice from './components/HistoricalPrice'
  import { mapGetters } from 'vuex'
  import moment from 'dayjs'

  export default {
    name: 'marketPriceManage',
    components: {
      GoodsTree, SetPrice, HistoricalPrice
    },
    data() {
      return {
        treeData: [],
        currentOrg: null,
        currentGoodsType: null,
        temp: {},
        areaPriceList: {},
        nextPriceList: {},
        tableData: {
          total: 0,
          column: [
            {
              type: 'expand',
              render: (h, { row }) => {
                return (
                  <div>
                    {((this.areaPriceList[row.goodsId] && this.areaPriceList[row.goodsId].length > 0) || (this.nextPriceList[row.goodsId] && this.nextPriceList[row.goodsId].length > 0)) && <div class='expand-container'>
                      {this.areaPriceList[row.goodsId] && this.areaPriceList[row.goodsId].length > 0 && <div class='expand'>
                        <div class='item first'>
                          <p>
                            <p>本期周期号</p>
                            <p>{this.areaPriceList[row.goodsId][0].cycNumber}</p>
                            <p>生效时间</p>
                            <p class='redColor'>{ moment(this.areaPriceList[row.goodsId][0].startDt).subtract(8, 'hour').format('YYYY-MM-DD HH:mm:ss') }</p>
                          </p>
                        </div>
                        {this.areaPriceList[row.goodsId] && this.areaPriceList[row.goodsId].length > 0 && this.areaPriceList[row.goodsId].some(it => it.fromPlat === 1) && <div class='item'>
                          <p class='fontWeight'>呼叫中心定价</p>
                          <div>
                            <p>挂牌价：{this.areaPriceList[row.goodsId][0].price0 && <span>{Number(this.areaPriceList[row.goodsId][0].price0).toFixed(2)}元</span>}</p>
                            <p>居民价：{this.areaPriceList[row.goodsId][0].price1 && <span>{Number(this.areaPriceList[row.goodsId][0].price1).toFixed(2)}元</span>}</p>
                            <p>商业价：{this.areaPriceList[row.goodsId][0].price2 && <span>{Number(this.areaPriceList[row.goodsId][0].price2).toFixed(2)}元</span>}</p>
                            <p>工业价：{this.areaPriceList[row.goodsId][0].price3 && <span>{Number(this.areaPriceList[row.goodsId][0].price3).toFixed(2)}元</span>}</p>
                          </div>
                        </div>}
                        {this.areaPriceList[row.goodsId] && this.areaPriceList[row.goodsId].length > 0 && this.areaPriceList[row.goodsId].some(it => it.fromPlat === 2) && <div class='item'>
                          <p class='fontWeight'>微信定价</p>
                          <div>
                            <p>挂牌价：{this.areaPriceList[row.goodsId][1].price0 && <span>{Number(this.areaPriceList[row.goodsId][1].price0).toFixed(2)}元</span>}</p>
                            <p>居民价：{this.areaPriceList[row.goodsId][1].price1 && <span>{Number(this.areaPriceList[row.goodsId][1].price1).toFixed(2)}元</span>}</p>
                            <p>商业价：{this.areaPriceList[row.goodsId][1].price2 && <span>{Number(this.areaPriceList[row.goodsId][1].price2).toFixed(2)}元</span>}</p>
                            <p>工业价：{this.areaPriceList[row.goodsId][1].price3 && <span>{Number(this.areaPriceList[row.goodsId][1].price3).toFixed(2)}元</span>}</p>
                          </div>
                        </div>}
                      </div>}
                      {((this.areaPriceList[row.goodsId] && this.areaPriceList[row.goodsId].length > 0) && (this.nextPriceList[row.goodsId] && this.nextPriceList[row.goodsId].length > 0)) && <el-divider />}
                      {this.nextPriceList[row.goodsId] && this.nextPriceList[row.goodsId].length > 0 && <div class='expand'>
                      {this.nextPriceList[row.goodsId].length > 0 && <div class='item first'>
                        <p>
                          <p>下期周期号</p>
                          <p>{this.nextPriceList[row.goodsId][0].cycNumber}</p>
                          <p>生效时间</p>
                          <p>{ moment(this.nextPriceList[row.goodsId][0].startDt).subtract(8, 'hour').format('YYYY-MM-DD HH:mm:ss') }</p>
                        </p>
                      </div>}
                      {this.nextPriceList[row.goodsId] && this.nextPriceList[row.goodsId].length > 0 && this.nextPriceList[row.goodsId].some(it => it.fromPlat === 1) && <div class='item'>
                        <p>呼叫中心定价</p>
                        <div>
                          <p>挂牌价：{this.nextPriceList[row.goodsId][0].price0 && <span>{Number(this.nextPriceList[row.goodsId][0].price0).toFixed(2)}元</span>}</p>
                          <p>居民价：{this.nextPriceList[row.goodsId][0].price1 && <span>{Number(this.nextPriceList[row.goodsId][0].price1).toFixed(2)}元</span>}</p>
                          <p>商业价：{this.nextPriceList[row.goodsId][0].price2 && <span>{Number(this.nextPriceList[row.goodsId][0].price2).toFixed(2)}元</span>}</p>
                          <p>工业价：{this.nextPriceList[row.goodsId][0].price3 && <span>{Number(this.nextPriceList[row.goodsId][0].price3).toFixed(2)}元</span>}</p>
                        </div>
                      </div>}
                      {this.nextPriceList[row.goodsId] && this.nextPriceList[row.goodsId].length > 1 && this.nextPriceList[row.goodsId].some(it => it.fromPlat === 2) && <div class='item'>
                        <p>微信定价</p>
                        <div>
                          <p>挂牌价：{this.nextPriceList[row.goodsId][1].price0 && <span>{Number(this.nextPriceList[row.goodsId][1].price0).toFixed(2)}元</span>}</p>
                          <p>居民价：{this.nextPriceList[row.goodsId][1].price1 && <span>{Number(this.nextPriceList[row.goodsId][1].price1).toFixed(2)}元</span>}</p>
                          <p>商业价：{this.nextPriceList[row.goodsId][1].price2 && <span>{Number(this.nextPriceList[row.goodsId][1].price2).toFixed(2)}元</span>}</p>
                          <p>工业价：{this.nextPriceList[row.goodsId][1].price3 && <span>{Number(this.nextPriceList[row.goodsId][1].price3).toFixed(2)}元</span>}</p>
                        </div>
                      </div>}
                    </div>}
                    </div>}
                    {!((this.areaPriceList[row.goodsId] && this.areaPriceList[row.goodsId].length > 0) || (this.nextPriceList[row.goodsId] && this.nextPriceList[row.goodsId].length > 0)) && <div style='padding-left: 100px;'>该商品没有配置价格</div>}
                  </div>
                )
              }
            },
            {
              prop: 'flag',
              label: '已报价',
              width: 70,
              render: (h, { row }) => {
                // 101 从右往左依次代表呼叫中心、微信、。。。
                if (row.flag) {
                  row.flag = '' + row.flag
                  return <span>{row.flag.charAt(row.flag.length - 1) > 0 && <svg-icon icon-class='phone-green' />}{row.flag.charAt(row.flag.length - 2) > 0 && <svg-icon icon-class='wechat-green' />}</span>
                }
                return ''
              }
            },
            {
              prop: 'goodsCode',
              label: '编码'
            },
            {
              prop: 'goodsName',
              label: '名称',
              width: 150
            },
            {
              prop: 'gtName',
              width: 100,
              label: '类型'
            },
            {
              prop: 'unitName',
              label: '单位',
              width: 60
            },
            {
              prop: 'remark',
              label: '描述',
              width: 300
            },
            {
              label: '操作',
              // fixed: 'right',
              width: 480,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link v-permission='1' underline={false} size='mini' onClick={() => this.setPrice(row, 'current')}>
                      设置本期报价
                    </el-link>
                    <el-link v-permission='2' underline={false} size='mini' type='danger' onClick={() => this.delPrice(row, 0)}>
                      删除本期报价
                    </el-link>
                    <el-link v-permission='3' underline={false} size='mini' onClick={() => this.setPrice(row, 'next')}>
                      设置下期报价
                    </el-link>
                    <el-link v-permission='4' underline={false} size='mini' type='danger' onClick={() => this.delPrice(row, 1)}>
                      删除下期报价
                    </el-link>
                    <el-link v-permission='5' underline={false} size='mini' onClick={() => this.openHistoricalPrice(row, $index)}>
                      历史价格周期
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    created() {
      this.getTreeData()
    },
    methods: {
      // 列表查询
      async fetchData() {
        const res = await queryGoodsListAll({
          gtId: this.currentGoodsType.gtId
          // orgSNNo: this.userInfo.orgSNNo
        })
        this.tableData.data = res.data
      },
      // 设置报价
      async setPrice(row, type) {
        await this.$refs.setPrice.open(row, type)
        this.$refs.lbTable.fetch()
      },
      // 删除报价
      delPrice(row, index) {
        const title = index === 0 ? '本' : '下'
        this.$confirm(`确认要删除该商品的${title}期报价吗？`, '操作提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '正在删除',
            duration: 0,
            iconClass: 'el-icon-loading'
          })
          marketPriceDelete({
            orgId: row.orgId,
            goodsId: row.goodsId,
            areaPriceType: 1,
            type: 0, // 0:市场价格,1:区域价格
            next: index // 0:本期,1:下期
          }).then(() => {
            this.$refs.lbTable.fetch()
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            loading.close()
          })
        })
      },
      // 历史
      openHistoricalPrice(row) {
        this.$refs.historicalPrice.open(row)
      },
      // 展开行
      async clickExpand(row, expandedRows) {
        if (expandedRows.length > 0) {
          const goods = expandedRows.find(item => item.goodsId === row.goodsId)
          if (goods) {
            this.$set(this.areaPriceList, goods.goodsId, [])
            this.$set(this.nextPriceList, goods.goodsId, [])
            const res = await queryMarketPriceDetail({
              goodsId: row.goodsId
            })
            if (res.data.areaPriceList) this.$set(this.areaPriceList, goods.goodsId, res.data.areaPriceList)
            if (res.data.nextPriceList) this.$set(this.nextPriceList, goods.goodsId, res.data.nextPriceList)
          }
        }
      },
      // 获取树图数据
      async getTreeData() {
        const res = await goodsTypeQueryAllList({})
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.treeData = getTreeData(data, 'parentId', 'gtId')
      },
      // 选择变化
      currentChange(current) {
        this.currentGoodsType = current
        this.fetchData()
      }
    }
  }
</script>

<style lang='scss' scoped>
.app-page {
  display: flex;
  height: calc(100vh - 124px);
  padding: 0;
  overflow-y: auto;
  /deep/ .el-table__expanded-cell {
    background-color: #e6f5f5;
  }
  /deep/ .el-table__cell .expand {
    display: flex;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 100px;
    .item {
      margin-right: 50px;
      line-height: 26px;
    }
    .first {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
  /deep/ .el-divider--horizontal {
    margin: 8px 0;
  }
}
.table {
  flex: 1;
}
</style>
